<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: pink;/* 背景色 */
        }
        #d1{
            width: 250px;
            height: 250px;
            background-image: url(l2.jpg);
        }
        #d2{
            width: 400px;
            height: 400px;
            background-image: url(l2.jpg);
            background-repeat: repeat;
        }
        #d3{
            width: 400px;
            height: 400px;
            background-image: url(l2.jpg);
            background-repeat: no-repeat;
            background-position:  left bottom ;
            /* background-position: 50% 50%; */
        }
        #d4 {
            width: 800px;
            height: 400px;
            background-image: url(l2.jpg);
            background-repeat: no-repeat;
            background-size: contain;
        }
    </style>
</head>
<body >
    <h2>背景图片</h2>
    <div id="d1">这段文字在div块背景图片上</div>
    <br>
    <h2>img图片</h2>
    <img src="l2.jpg">
    <br>
    <h2>图片平铺</h2>
    <div id="d2">十大科技上的</div>
    <h2>图片位置</h2>
    <div id="d3">十大科技上的</div>
    <h2>图片尺寸</h2>
    <div id="d4">十大科技上的</div>
</body>
</html>

###
背景图片 background-image:url(地址);
###
背景平铺 background-repeat: *** :
repeat--平铺（默认）
no-repeat---不平铺
repeat-x  --水平平铺
repeat-y  --垂直平铺
###
背景位置 background-position: X Y 
X --》 left center right px **%
Y --》 top center bottom px **%
###
背景尺寸 background-size：
px % cover[x轴占满] contain【包含整个背景，x占满或者y】


